import React, {Component} from 'react';
import axios from 'axios';
import '../css/maizuo.css';
import BetterScroll from 'better-scroll';

class Cinema extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cinemas: [],
            totalCinemas: []
        }
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=4281971',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"1759065151917503798673409"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data.data.cinemas);
            this.setState({
                cinemas: res.data.data.cinemas,
                totalCinemas: res.data.data.cinemas
            }, () => {
                new BetterScroll('.cinema-wrapper');
            })

        }).catch(err => {
            console.log(err);
        })
    }

    inputQuery = e => {
        const queryParm = e.target.value
        const queryList = this.state.totalCinemas.filter(cinema =>
            cinema.name.includes(queryParm) || cinema.address.includes(queryParm))
        this.setState({
            cinemas: queryList
        }, () => {
            new BetterScroll('.cinema-wrapper');
        })
    }

    render() {
        return (<div>
            <input onInput={this.inputQuery}/>
            <div className="cinema-wrapper" style={{height: '600px', overflow: 'hidden'}}>
                <div className="cinema-content">
                    {this.state.cinemas.map(cinema => {
                        return <dl key={cinema.cinemaId}>
                            <dt>{cinema.name}</dt>
                            <dd>{cinema.address}</dd>
                        </dl>
                    })}
                </div>
            </div>
        </div>);
    }
}

export default Cinema;